<template>
    <div class="role">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button type="success" plain style='margin-bottom:20px'>添加角色</el-button>
        <template>
            <el-table
                border
                :data="rolesList"
                style="width:100%">
                <el-table-column type="expand">
                <template slot-scope="scope">
                      <!-- 这是要展开的内容 -->
                      <el-row v-for= 'first in scope.row.children' :key="first.id">
                        <el-col :span="4">
                          <el-tag
                            closable
                            type="success"
                            style="margin-top:10px"
                            @close="deleteRoleRight(scope.row,first.id)">
                            {{first.authName}}
                          </el-tag>
                        </el-col>
                        <el-col :span="20">
                          <el-row v-for = 'second in first.children' :key="second.id">
                            <el-col :span="4">
                              <el-tag
                                closable
                                type="warning"
                                style="margin-top:10px"
                                @close="deleteRoleRight(scope.row,second.id)">
                                {{second.authName}}
                              </el-tag>
                            </el-col>
                            <el-col :span="20">
                                  <el-tag
                                    closable
                                    type="info"
                                    v-for = "third in second.children" :key="third.id"
                                    style="margin-right:10px;margin-top:10px"
                                    @close="deleteRoleRight(scope.row,third.id)">
                                    {{third.authName}}
                                 </el-tag>
                            </el-col>
                          </el-row>
                        </el-col>
                      </el-row>
                </template>
                </el-table-column>
                <el-table-column
                        type="index"
                        width="50">
                        </el-table-column>
                <el-table-column
                label="角色名称"
                prop="roleName">
                </el-table-column>
                <el-table-column
                label="描述"
                prop="roleDesc">
                </el-table-column>
                <el-table-column
                label="操作"
                prop="desc">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" style="width:80px">编辑</el-button>
                    <el-button type="primary" icon="el-icon-delete" style="width:80px">删除</el-button>
                    <el-button type="primary" style="width:80px" @click="showGrantDialog(scope.row)">授权角色</el-button>
                    </template>
                </el-table-column>
            </el-table>
            </template>
         <el-dialog
            title="分配权限"
            :visible.sync="grantDialogVisible"
            width="30%"
            :before-close="handleClose">
            <el-tree
             ref='tree'
              :data="rightList"
              show-checkbox
              node-key="id"
              :default-expand-all='true'
              :default-checked-keys="rolerightlist"
              :props="defaultProps">
            </el-tree>
            <span slot="footer" class="dialog-footer">
              <el-button @click="grantDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="getRightSubmit">确 定</el-button>
            </span>
         </el-dialog>
    </div>
</template>
<script>
import {getRolesList, getRightList, grantroleright, deleteroleright} from '@/api/index.js'
export default {
  data () {
    return {
      rolesList: [],
      rightList: [],
      rolerightlist: [],
      currentRuleId: '',
      grantDialogVisible: false,
      defaultProps: {
        //   就是指定子树的数据来源于当前节点的那一个属性
        children: 'children',
        // 指定节点所显示的文本为当前对象的那一个属性
        label: 'authName'
      }
    }
  },
  mounted () {
    this.initList()
  },
  methods: {
    // 查询角色列表
    initList () {
      getRolesList()
        .then((res) => {
        // console.log(res)
          this.rolesList = res.data
        })
    },
    // 显示授权角色对话框
    showGrantDialog (row) {
      this.grantDialogVisible = true
      this.currentRuleId = row.id
      getRightList({type: 'tree'})
        .then((res) => {
          // console.log(res.data)
          this.rightList = res.data
        })
      this.rolerightlist.length = 0
      // 遍历
      row.children.forEach((first, index) => {
        if (first.children && first.children.length !== 0) {
          first.children.forEach((second) => {
            if (second.children && second.children.length !== 0) {
              second.children.forEach((third) => {
                this.rolerightlist.push(third.id)
              })
            }
          })
        }
      })
    },
    // 提交用户授权
    getRightSubmit () {
      // console.log(this.currentRuleId)
      // grantroleright(this.currentRuleId)
      // 1 获取当前所有被选中的节点对象,它是一个数组
      var selectednodes = this.$refs.tree.getCheckedNodes()
      // console.log(selectednodes)
      // 2 遍历数组,获取我们需要的id和pid,它是一组组的id组成的字符串形成的数组
      var originArr = selectednodes.map((item) => {
        return item.id + ',' + item.pid
      })
      // console.log(originArr)
      // 3 将这个数组拼接成一个整体的字符串,里面有重复值
      var originStr = originArr.join(',')
      // console.log(originStr)
      // 4 使用new Set()去除重复值,它是一个对象
      var myset = new Set(originStr.split(','))
      // console.log(myset)
      // 5 使用Array.from把myset对象转成数组
      var finalArr = Array.from(myset)
      // console.log(finalArr)
      // 发送授权请求
      grantroleright(this.currentRuleId, {rids: finalArr.join(',')})
        .then((res) => {
          console.log(res)
          if (res.meta.status === 200) {
            this.$message({
              type: 'success',
              message: res.meta.msg
            })
            this.grantDialogVisible = false
            // console.log(123)
            // this.initList()
            // console.log(this.editDialogFormVisible)
          } else {
            this.$message({
              type: 'success',
              message: res.meta.msg
            })
          }
        })
    },
    // 实现删除指定权限
    deleteRoleRight (row, rightId) {
      // console.log(rightId)
      deleteroleright(row.id, rightId)
        .then(res => {
          if (res.meta.status === 200) {
            this.$message({
              type: 'success',
              message: res.meta.msg
            })
            row.children = res.data
          } else {
            this.$message({
              type: 'success',
              message: res.meta.msg
            })
          }
        })
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>
<style lang="scss" scoped>
    .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: auto;
  }
</style>
